<template>
  <section class="quick">
    <TopAction fixed :show="[0, 2]" />
    <el-avatar :src="userInfo?.portrait" class="header" />
    <span>{{ userInfo?.nickName }}</span>
    <div class="loading" v-if="loading">
      <img src="local-media://loading.png" />
      <b>正在登录</b>
    </div>
    <div v-else>
      <SubmitButton text="登录" style="margin-top: 165px;" @submit="login" />
      <p @click="loginout" class="noDrag" style="cursor:pointer;">切换账号</p>
    </div>
  </section>
</template>
<script setup>
import SubmitButton from '@/components/Login/SubmitButton.vue';
import { computed, ref, inject } from 'vue';
import { useStore } from 'vuex'
import { useRouter } from "vue-router"
import TopAction from '@/components/TopAction.vue';
import { enterMain, enterLogin } from '@/tool'
import { dexieInit } from '@/config/data'
const store = useStore()
const router = useRouter()
const userInfo = computed(() => store?.state?.userInfo)
const refreshUserInfo = inject('refreshUserInfo')
const loading = ref(false)
const login = async () => {
  loading.value = true
  await new Promise(rs => {
    setTimeout(() => {
      rs(true)
    }, 2000);
  })
  await refreshUserInfo()
  dexieInit(window.localStorage.getItem("userId"))
  loading.value = false
  router.replace('/')
  enterMain()
}
const loginout = () => {
  window.localStorage.setItem('Token', '')
  window.localStorage.removeItem('userId')
  router.replace('/login')
  enterLogin()
}
</script>

<style scoped lang="less">
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.quick {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;

  .header {
    margin-top: 118px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  >span {
    margin-top: 14px;
    font-size: 20px;

    font-weight: 500;
    color: #242424;
    line-height: 25px;
  }

  p {
    font-size: 16px;

    font-weight: 400;
    color: #2657B5;
    line-height: 25px;
    margin-top: 30px;
    text-align: center;
  }


  .loading {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 64px;

    >img {
      width: 24px;
      height: 24px;
      transition: all;
      animation-name: rotate;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      margin-bottom: 12px;
    }

    >b {
      font-size: 20px;

      font-weight: 500;
      color: #05D9D9;
      line-height: 25px;
    }
  }

}
</style>
